<template>
  <div class="container">
    <div class="tab-box">
      <router-link replace :to="'/recommendation'">
        <div class="tab-item">推荐</div>
      </router-link>
      <router-link replace :to="'/music'">
        <div class="tab-item">音乐馆</div>
      </router-link>
      <router-link replace :to="'/videos'">
        <div class="tab-item">视频</div>
      </router-link>
    </div>
    <router-view></router-view>
  
    <tabbar currentKey="index" />
  </div>
</template>
<script>
import tabbar from "@/components/tabbar";

export default {
  name: "index",
  components: {
    tabbar
  },
  computed: {
    getuser() {
      return localStorage.getItem("user");
    },
  },
  methods: {
    login() {
      this.$router.push("/login");
      // 编程式导航
      // push({
      //   path:'url',
      //   query:{
      //     userId:'test' 只能这样
      //   }
      // })
      // push({
      //   name:'url', 路由配置时这个是可选的
      //   params:{         类似于get
      //     userId:'test' 可选择query 类似于post
      //   }
      // })
    },
  },
};
</script>
<style scoped>
.tab-box {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  position: fixed;
}
.tab-item {
  margin-top: 10px;
  font-size: 20px;
  height: 30px;
  flex: 1;
  line-height: 30px;
  color: #707070;
  margin-left: 20px;
  text-align: center;
}
.router-link-active .tab-item {
  font-size: 22px;
  font-weight: 700;
}
.router-link-active .tab-item::after {
  content: "";
  display: block;
  border-bottom: solid #ff7d15;
}
span {
  top: 15px;
  position: absolute;
  right: 20px;
  font-weight: 500;
  color: #707070;
}
</style>